<template>
  <div class="papersetting-container" v-if="showVisible">
    <div class="paperset-title-container">
      <span>纸张设置</span>
      <p>1.纸张设置的边界线为模板的有效边界，边界线只做参考。</p>
      <p>2.打印为有效边界的所有内容。</p>
    </div>
    <div class="select-container">
      <span class="select-title">纸张大小</span>
      <el-select v-model="size" style="width: 85%">
        <el-option label="A4" value="A4"> </el-option>
        <el-option label="A3" value="A3"> </el-option>
        <el-option label="A5" value="A5"> </el-option>
        <el-option label="B5" value="B5"> </el-option>
      </el-select>
    </div>
    <div class="select-container">
      <span class="select-title">纸张方向</span>
      <el-select v-model="layout" style="width: 85%">
        <el-option label="纵向" value="vertical"> </el-option>
        <el-option label="横向" value="horizontal"> </el-option>
      </el-select>
    </div>
    <div class="tc mt20">
      <el-button
        class="notice-button-cancel1"
        size="mini"
        @click="handleCancel"
      >取消</el-button
      >
      <el-button
        class="notice-button-confirm1"
        type="primary"
        size="mini"
        @click="handleConfirm"
      >确定</el-button
      >
    </div>
  </div>
</template>
<script>
export default {
  name: 'PaperSelect',
  components: {},
  data () {
    return {
      showVisible: false,
      size: 'A4',
      layout: 'vertical',
      showLine: false,
      actionType: '' // 操作类型
    }
  },
  mounted: function () {
    const that = this
    const func = (e) => {
      if (
        that.showVisible &&
        e.target.className !== 'papersetting-container' &&
        e.target.className !== 'question-drop-menu-head' &&
        e.target.className !== 'paper-input' &&
        e.target.className !== 'drop-down-arrow' &&
        e.target.className !== 'icon toolbar-item-icon-pageset'
      ) {
        that.showVisible = false
      }
    }
    document.addEventListener('click', func)
  },
  methods: {
    initData (data) {
      const { size, layout, showVisible } = data
      if (showVisible === false) {
        this.showVisible = false
      } else {
        this.showVisible = !this.showVisible
      }
      if (!data.size) return
      this.size = size
      this.layout = layout
    },

    handleCancel () {
      this.showVisible = false
    },
    handleConfirm () {
      const config = {
        customize: { width: 1, height: 1 },
        layout: this.layout,
        size: this.size
      }
      this.showVisible = false
      this.$emit('changePaperSetting', config)
    }
  }
}
</script>
<style>
.papersetting-container {
  background: #fff;
  width: 329px;
  font-size: 12px;
  text-align: left;
  padding-bottom: 10px;
}

.papersetting-container::before {
  content: '';
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  border-bottom: 6px solid #fff;
  position: absolute;
  width: 0;
  height: 0;
  z-index: 999999999;
  top: -6px;
  left: 46px;
}

.papersetting-container input {
  box-sizing: border-box;
}

.papersetting-container .paperset-title-container {
  padding: 8px 10px 10px;
  border-bottom: 1px solid #e4ebf0;
}

.papersetting-container .paperset-title-container span {
  color: #3e4e59;
  line-height: 20px;
}

.papersetting-container .paperset-title-container p {
  color: #8f9ca6;
  letter-spacing: 0;
  line-height: 20px;
  margin: 0;
  padding: 0;
  margin-top: 3px;
}

.papersetting-container .notice-button {
  margin-top: 30px;
}

.papersetting-container .notice-button span {
  font-size: 12px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  border-radius: 2px;
  width: 50px;
  line-height: 26px;
  text-align: center;
  display: inline-block;
  cursor: pointer;
}

.papersetting-container .notice-button .notice-button-cancel {
  background: #f5f8fa;
  color: #36434d;
  margin-right: 10px;
  margin-left: 109px;
}

.papersetting-container .notice-button .notice-button-confirm {
  background: #1687d9;
  color: #fff;
}

.papersetting-container .select-container {
  margin-left: 30px;
  margin-top: 15px;
  height: 52px;
}

.papersetting-container .select-container .select-title {
  margin: 15px 31px 2px 5px;
  color: #03101a;
  letter-spacing: 0;
  line-height: 20px;
  display: block;
}

.papersetting-container .select-container .question-drop-menu {
  height: 30px;
}

.papersetting-container
  .select-container
  .question-drop-menu
  .question-drop-menu-head {
  display: inline-block;
  height: 30px;
  position: relative;
  cursor: pointer;
}

.papersetting-container
  .select-container
  .question-drop-menu
  .question-drop-menu-head
  > .el-select {
  display: inline-block;
  height: 30px;
  width: 268px;
  padding: 0 15px 0 5px;
  border: 1px solid #e4ebf0;
  border-radius: 5px;
  cursor: pointer;
  outline: 0;
  box-sizing: border-box;
}

.papersetting-container
  .select-container
  .question-drop-menu
  .question-drop-menu-head
  > .el-select:hover {
  border: 1px solid #96d0fa;
}

.papersetting-container
  .select-container
  .question-drop-menu
  .question-drop-menu-head
  > .el-select.active {
  border: 1px solid #1587d9;
}

.papersetting-container .select-container .select-list {
  background: #fff;
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  width: 268px;
  transform: scaleY(0);
  transition: transform 0.15s;
  list-style: none;
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  transform-origin: 0 0;
}

.papersetting-container .select-container .select-list:hover {
  cursor: pointer;
}

.papersetting-container .select-container .select-list.active {
  transform: scaleY(1);
  transition: transform 0.15s;
}

.papersetting-container .select-container .select-list .select-item {
  height: 26px;
  width: 100%;
  line-height: 26px;
  padding-left: 10px;
  box-sizing: border-box;
}

.papersetting-container .select-container .select-list .select-item:hover {
  background: #f5f8fa;
}

.papersetting-container .customSetting-container {
  margin: 20px 31px 5px 30px;
}

.papersetting-container .customSetting-container .custom-input {
  display: inline-block;
}

.papersetting-container .customSetting-container .custom-input input {
  background: #fff;
  border: 1px solid #e4ebf0;
  border-radius: 5px;
  width: 74px;
  height: 28px;
  outline: none;
}

.papersetting-container .customSetting-container .custom-input input:hover {
  border: 1px solid #96d0fa;
}

.papersetting-container .customSetting-container .custom-input.active input {
  border: 1px solid #1587d9;
}

.papersetting-container .customSetting-container .custom-input.error input {
  background: rgba(204, 41, 41, 0.1);
  border: 1px solid #cc2929;
}

.papersetting-container .customSetting-container .custom-input:first-child {
  margin-right: 28px;
}

.papersetting-container
  .customSetting-container
  .custom-input
  span:first-child {
  margin-right: 5px;
}

.papersetting-container .customSetting-container .custom-input span:last-child {
  margin-left: 5px;
}
</style>
